<template>
  <div class="shoucang">
    <div class="shoucangItem" v-for="item in likeDetail" :key="item.pid">
      <router-link :to="`/detail/${item.pid}`">
        <div class="left">
          <img :src="item.image" alt="" />
        </div>
        <div class="right">
          <div class="top">
            {{ item.store_name }}
          </div>
          <div class="bottom">
            <div class="bottom_left">¥{{ item.price }}</div>
            <div class="bottom_right" @click.prevent="delLike(item.pid)">
              删除
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "ShouCang",
  data() {
    return {};
  },
  created() {
    this.getLikeList();
    console.log(this.likeDetail);
  },
  computed: {
    likeDetail: function () {
      return this.$store.state.likeDetail;
    },
  },
  methods: {
    delLike(id) {
      // console.log(id)
      this.$axios
        .post("api/collect/del", {
          category: "product",
          id: id,
        })
        .then((d) => {
          if (d.data.status == 200) {
             this.$toast("删除成功");
             this.getLikeList()
          }
        });
    },
    ...mapActions(["getLikeList"]),
  },
};
</script>

<style lang="less">
.shoucang {
  .shoucangItem {
    border-bottom: 0.1rem solid #f0f0f0;
    padding: 0.8rem;
    font-size: 0.9rem;
    a {
      display: flex;
      color: black;
      .left {
        img {
          height: 4rem;
          width: 4rem;
        }
      }
      .right {
        padding-left: 0.7rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .bottom_left {
            color: #f44939;
            font-weight: bold;
          }
          .bottom_right {
            padding: 0rem 0.7rem;
            border: 0.1rem solid #d5d5d5;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}
</style>